<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 加载中 -->
			<pj-demo title="加载中">
				<pure-loadmore
					class="loadmore"
					status="loading"
				></pure-loadmore>
			</pj-demo>

			<!-- 加载全部 -->
			<pj-demo title="加载全部">
				<pure-loadmore
					class="loadmore"
					status="nomore"
				></pure-loadmore>
			</pj-demo>

			<!-- 加载失败 -->
			<pj-demo title="加载失败">
				<pure-loadmore
					class="loadmore"
					status="fail"
				></pure-loadmore>
			</pj-demo>

			<!-- 纵向布局 -->
			<pj-demo title="纵向布局">
				<pure-loadmore
					class="loadmore"
					status="loading"
					vertical
				></pure-loadmore>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.loadmore {
		background: var(--pure-background-default);
		padding: 20px;
		border-radius: var(--pure-radius-default);
	}
</style>
